<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>滨海基金 -预约列表</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- Data Tables -->
<link href="css/plugins/dataTables/dataTables.bootstrap.css"
	rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
<link href="css/jquery-confirm.css" rel="stylesheet">
<link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
<link href="css/common.css" rel="stylesheet">
<script src="js/plugins/sweetalert/sweetalert.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/plugins/jeditable/jquery.jeditable.js"></script>
<script src="js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="js/plugins/dataTables/dataTables.bootstrap.js"></script>
<script src="js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript"
	src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
<script src="js/plugins/modal/bootstrap-modal.js"></script>
<script src="js/jquery-confirm.js"></script>
<script type="text/javascript" src="./js/img_upload.js"></script>
<script type="text/javascript" src="./js/fileUploadUtil.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<style type="text/css">
/* dataTables列内容居中 */
.table>tbody>tr>td {
	text-align: center;
}
/* dataTables表头居中 */
.table>thead:first-child>tr:first-child>th {
	text-align: center;
}
</style>
</head>
<body class="gray-bg">
	<div class="row">
		<div class="col-sm-12">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>
						预约 <small>记录,列表</small>
					</h5>
					<div class="ibox-content">
						<div class="input-group col-md-3"
							style="margin-top: 0px; positon: relative; float: left; bottom: -5px;">
							<input id="customerId" type="text" class="form-control "
								placeholder="请输入关键字（名称）"/ > <span
								class="input-group-btn">
								<button onclick="Search()" class="btn btn-info btn-search">查询</button>
								<button class="btn btn-info btn-search"
									onclick="visitAdd()" style="margin-left: 5px">添加</button>
							</span><input type="hidden" id="userId" value="${userId}" />
						</div>
						<table
							class="table table-striped table-bordered table-hover dataTables-example"
							id="dataTables-example">
							<thead>
								<tr style="height: 30px">
									<th style="width: 50px" align="center">序号</th>
									<th style="width: 140px" align="center">预约客户</th>
									<th style="width: 100px" align="center">预约时间</th>
									<th style="width: 200px" align="center">备注</th>
									<th style="width: 100px" align="center">预约人</th>
									<th style="width: 100px" align="center">操作</th>
								</tr>
							</thead>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 预约详情 -->
	<div class="modal fade  " id='visitDetailModal'>
		<div class="modal-dialog" style="width: 600px; height: 600px;">
			<div class="modal-content">
				<div class="modal-header">
					<button class="close" data-dismiss='modal'>×</button>
					<h2 class="modal-title" align="center">预约详情</h2>
				</div>

				<div class="modal-body" align="center">
					<form id="myFrom">
						<table align="center">
							<tr style="height: 40px">
								<td align="right"><label>预约客户： </label></td>
								<td><input type="text" name="name" id="dname"
									class="form-control" disabled="disabled"></td>
							</tr>
							<tr style="height: 40px">
								<td><label>预约时间： </label></td>
								<td><input type="text" name="date" id="ddate"
									class="form-control" disabled="disabled"></td>
							</tr>
							<tr style="height: 120px">
								<td><label>注释： </label></td>
								<td><textarea class="form-control" rows="5" cols="50"
										name="visitContent" id="dvisitContent" disabled="disabled"></textarea>
								</td>
							</tr>
						</table>
					</form>
				</div>
				<div class="modal-footer" align="center">
					<div align="center">
						<button class="btn btn-primary"
							onclick="closeModal(visitDetailModal)">确认</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 添加信息 -->
	<div class="modal fade  " id='visitAddModal'>
		<div class="modal-dialog" style="width: 600px; height: 600px;">
			<div class="modal-content">
				<div class="modal-header">
					<button class="close" data-dismiss='modal'>×</button>
					<h2 class="modal-title" align="center">添加预约</h2>
				</div>

				<div class="modal-body" align="center">
					<form id="myFromAdd">
						<table align="center">
							<tr style="height: 40px">
								<td align="right"><label>预约客户： </label></td>
								<td><select class="form-control" name="reserveCustomerId"
									id="aname"" >

								</select></td>
							</tr>
							<tr style="height: 40px">
								<td><label>预约时间： </label></td>
								<td><input type="text" name="date1" id="adate"
									readonly="readonly" class="form-control"
									onClick="WdatePicker({lang:'zh-cn',minDate:'new Date()',dateFmt:'yyyy-MM-dd HH:mm'})"
									placeholder="请选择预约时间"></td>
							</tr>
							<tr style="height: 120px">
								<td><label>备注： </label></td>
								<td><textarea class="form-control" rows="5" cols="50"
										style="resize: none" name="reserveRemark" id="avisitContent"></textarea>
								</td>
							</tr>
						</table>
					</form>
				</div>
				<div class="modal-footer" align="center">
					<div align="center">
						<button class="btn btn-primary" id="btnVisitAdd">确认</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 编辑预约 -->
	<div class="modal fade  " id='visitEditModal'>
		<div class="modal-dialog" style="width: 600px; height: 600px;">
			<div class="modal-content">
				<div class="modal-header">
					<button class="close" data-dismiss='modal'>×</button>
					<h2 class="modal-title" align="center">编辑信息</h2>
				</div>

				<div class="modal-body" align="center">
					<form id="myFromEdit">
						<table align="center">
							<tr style="height: 40px">
								<td align="right"><label>预约客户： </label></td>
								<td><select class="form-control" name="reserveCustomerId"
									id="ename"" >

								</select>
								<input type="hidden" name="reserveId" id="ereserveId" />
								</td>
							</tr>
							<tr style="height: 40px">
								<td><label>预约时间： </label></td>
								<td><input type="text" name="date1" id="edate"
									readonly="readonly" class="form-control"
									onClick="WdatePicker({lang:'zh-cn',minDate:'new Date()',dateFmt:'yyyy-MM-dd HH:mm'})"
									placeholder="请选择预约时间"></td>
							</tr>
							<tr style="height: 120px">
								<td><label>备注： </label></td>
								<td><textarea class="form-control" rows="5" cols="50"
										style="resize: none" name="reserveRemark" id="evisitContent"></textarea>
								</td>
							</tr>
						</table>
					</form>
				</div>
				<div class="modal-footer" align="center">
					<div align="center">
						<button class="btn btn-primary" id="btnVisitEdit" >确认</button>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript">
		var table;
		$(function() {
			//提示信息
			var lang = {
				"sProcessing" : "<div style=\"float:right;width:50%\" >处理中...</div>",
				"sLengthMenu" : "每页 _MENU_ 项",
				"sZeroRecords" : "没有匹配结果",
				"sInfo" : "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",
				"sInfoEmpty" : "当前显示第 0 至 0 项，共 0 项",
				"sInfoFiltered" : "(由 _MAX_ 项结果过滤)",
				"sInfoPostFix" : "",
				"sSearch" : "搜索:",
				"sUrl" : "",
				"sEmptyTable" : "表中数据为空",
				"sLoadingRecords" : "载入中...",
				"sInfoThousands" : ",",
				"oPaginate" : {
					"sFirst" : "首页",
					"sPrevious" : "上页",
					"sNext" : "下页",
					"sLast" : "末页",
					"sJump" : "跳转"
				},
				"oAria" : {
					"sSortAscending" : ": 以升序排列此列",
					"sSortDescending" : ": 以降序排列此列"
				}
			};
			//初始化表格
			table = $("#dataTables-example")
					.dataTable(
							{
								"fnDrawCallback" : function() {
									var api = this.api();
									var startIndex = api.context[0]._iDisplayStart;//获取到本页开始的条数
									api.column(0).nodes().each(
											function(cell, i) {
												cell.innerHTML = startIndex + i
														+ 1;
											});
								},
								language : lang, //提示信息
								autoWidth : false, //禁用自动调整列宽
								stripeClasses : [ "odd", "even" ], //为奇偶行加上样式，兼容不支持CSS伪类的场合
								processing : true, //隐藏加载提示,自行处理
								serverSide : true, //启用服务器端分页
								searching : false, //禁用原生搜索
								orderMulti : false, //启用多列排序
								order : [], //取消默认排序查询,否则复选框一列会出现小箭头
								renderer : "bootstrap", //渲染样式：Bootstrap和jquery-ui
								pagingType : "simple_numbers", //分页样式：simple,simple_numbers,full,full_numbers
								"aLengthMenu" : [ 10 ],
								"bLengthChange" : false,//隐藏分页数量选择框
								ordering : false, //关闭排序图标
								ajax : function(data, callback, settings) {
									//封装请求参数
									var param = {};
									param.limit = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
									param.start = data.start;//开始的记录序号
									param.page = (data.start / data.length) + 1;//当前页码
									//console.log(param);
									param.userId = $("#userId").val();
									var customerId = $("#customerId").val().trim();
									if (customerId != null && customerId != "") {
										param.customerId = customerId
									}
									//ajax请求数据
									$
											.ajax({
												type : "POST",
												url : "reserveList.do",
												cache : false, //禁用缓存
												data : param, //传入组装的参数
												dataType : "json",
												success : function(result) {
													//console.log(result);
													//setTimeout仅为测试延迟效果
													//封装返回数据
													var returnData = {};
													draw = result.draw;//后台返回的计数器
													returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
													returnData.recordsTotal = result.total;//返回数据全部记录
													returnData.recordsFiltered = result.total;//后台不实现过滤功能，每次查询均视作全部结果
													returnData.data = result.data;//返回的数据列表
													//console.log(returnData);
													//调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
													//此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
													callback(returnData);

												}
											});
								},
								//列表表头字段
								columns : [
										{
											"data" : null
										},
										{
											"data" : function(data) {
												if (data.customer != null) {
													return data.customer.customerName;
												} else {
													return "-";
												}
											}
										},
										{
											"data" : "reserveDate"
										},
										{
											"data" : function(data) {
												if (data.reserveRemark.length > 20) {
													return data.reserveRemark
															.substring(0, 10)
															+ "......";
												} else if (data.reserveRemark.length < 20) {
													return data.reserveRemark;
												} else {
													return "-";
												}
											}
										}, {
											"data" : function(data) {
												if (data.employee != null) {
													return data.employee.name;
												} else {
													return "-";
												}
											}
										}

								],
								columnDefs : [
										{
											"targets" : [ 5 ], //第14列加一条 自定义列
											"data" : "reserveId", //数据列名
											"render" : function(data, type,
													full) { //返回自定义的内容
												return "<a class=\"btn btn-info btn-xs\" data-toggle=\"modal\"  onclick=\"visitDetail('"
														+ data
														+ "')\"   > 详情<\a> "
														+ "<a class=\"btn btn-primary btn-xs\" data-toggle=\"modal\"  onclick=\"visitEdit('"
														+ data
														+ "')\"   > 编辑<\a> "
														+ "<a class=\"btn btn-danger btn-xs\" data-toggle=\"modal\"  onclick=\"visitDelete('"
														+ data
														+ "')\"   > 删除<\a>";
											}

										},
										{
											"targets" : [ 2 ],
											"render" : function(data, type,
													full) {
												return toDate(new Date(data));
											}

										} /* ,{
													            		"targets":[3],
													            		"render":function(data,type,full){
													            			if(data==null){
													        					return "";
													        				}
													        				if(data.length > 20){
													        					return data
													        					.substr(0, 20)
													        					+ "...";
													        				}
													        				else{
													        					return data
													        				}
													            		}
													            	} */

								]
							})//.api();

			//添加预约记录操作
			$("#btnVisitAdd").click(function() {
				var aname = $("#aname").val();
				var adate = $("#adate").val();
				if (aname == "") {
					swal("温馨提示!", "请选择预约客户!", "error");
					return;
				}
				if (adate == "") {
					swal("温馨提示!", "请选择预约时间!", "error");
					return;
				}
				$.ajax({
					url : "insertReserve.do",
					data : $("#myFromAdd").serializeArray(),
					type : "post",
					dataType : "json",
					success : function(result) {
						if (result.code == 0) {
							swal({
								title : "提示",
								text : "添加成功！",
								type : "success",
								confirmButtonText : "确定"
							}, function() {
								$("#visitAddModal").modal("hide");
								Search();
							});

						} else {
							sweetAlert("异常", "操作失败,请刷新后重试!", "error");
						}

					},
					error : function() {
						sweetAlert("异常", "网络出现异常!", "error");
					}

				});// ajax end;
			});
			//编辑预约记录操作
			$("#btnVisitEdit").click(function() {
				var aname = $("#ename").val();
				var adate = $("#edate").val();
				if (aname == "") {
					swal("温馨提示!", "请选择预约客户!", "error");
					return;
				}
				if (adate == "") {
					swal("温馨提示!", "请选择预约时间!", "error");
					return;
				}
				$.ajax({
					url : "updateReserve.do",
					data : $("#myFromEdit").serializeArray(),
					type : "post",
					dataType : "json",
					success : function(result) {
						if (result.code == 0) {
							swal({
								title : "提示",
								text : "编辑成功！",
								type : "success",
								confirmButtonText : "确定"
							}, function() {
								$("#visitEditModal").modal("hide");
								Search();
							});

						} else {
							sweetAlert("异常", "操作失败,请刷新后重试!", "error");
						}

					},
					error : function() {
						sweetAlert("异常", "网络出现异常!", "error");
					}

				});// ajax end;
			});
		});
		function Search() {
			table.fnDraw();
		}

		function visitDetail(visitId) {
			$.ajax({
				url : "getReserve.do",
				data : {
					"reserveId" : visitId
				},
				type : "post",
				dataType : "json",
				success : function(result) {
					if (result.code == 0) {
						if (result.reserve.customer != null) {
							$("#dname").val(
									result.reserve.customer.customerName);
						}
						$("#ddate").val(
								toDate(new Date(result.reserve.reserveDate)));
						$("#dvisitContent").val(result.reserve.reserveRemark);
						$("#visitDetailModal").modal("show");
					} else {
						sweetAlert("异常", "网络出现异常!", "error");
					}

				},
				error : function() {
					sweetAlert("提示", "暂无数据!", "error");
				}
			})
		}
		function visitAdd() {
			$
					.ajax({
						url : "getReserveCustomer.do",
						data : {
							"userId" : $("#userId").val()
						},
						type : "post",
						dataType : "json",
						success : function(result) {
							if (result.code == 0) {
								var html = "";
								$("#aname").empty();
								for (var i = 0; i < result.customer.length; i++) {
									html += "<option value="+result.customer[i].customerId+">"
											+ result.customer[i].customerName
											+ "</option>";
								}
								$("#aname").append(html);
								$("#avisitContent").val("");
								$("#adate").val("");
								$("#visitAddModal").modal("show");
							} else {
								sweetAlert("异常", "网络出现异常!", "error");
							}

						},
						error : function() {
							sweetAlert("提示", "暂无数据!", "error");
						}
					})

		}
		function visitEdit(id) {
			$
					.ajax({
						url : "getReserveCustomer.do",
						data : {
							"userId" : $("#userId").val()
						},
						type : "post",
						dataType : "json",
						success : function(result) {
							if (result.code == 0) {
								var html = "";
								$("#ename").empty();
								for (var i = 0; i < result.customer.length; i++) {
									html += "<option value="+result.customer[i].customerId+">"
											+ result.customer[i].customerName
											+ "</option>";
								}
								$("#ename").append(html);
								$.ajax({
											url : "getReserve.do",
											data : {
												"reserveId" : id
											},
											type : "post",
											dataType : "json",
											success : function(result) {
												if (result.code == 0) {
													$("#ereserveId").val(result.reserve.reserveId);
													$("#ename").val(result.reserve.customer.customerId);
													$("#edate").val(toDate(new Date(result.reserve.reserveDate)));
													$("#evisitContent").val(result.reserve.reserveRemark);
													$("#visitEditModal").modal(
															"show");
												} else {
													sweetAlert("异常", "网络出现异常!",
															"error");
												}

											},
											error : function() {
												sweetAlert("提示", "暂无数据!",
														"error");
											}
										});
							} else {
								sweetAlert("异常", "网络出现异常!", "error");
							}

						},
						error : function() {
							sweetAlert("提示", "暂无数据!", "error");
						}
					});
		}
		function visitDelete(id) {
			swal({
				title : "提示",
				text : "确认删除该记录？",
				type : "warning",
				showCancelButton : true,
				confirmButtonColor : "#DD6B55",
				confirmButtonText : "确定",
				cancelButtonText : "取消",
				closeOnConfirm : false
			}, function() {
			$
					.ajax({
						url : "deleteReserve.do",
						data : {
							"reserveId" : id
						},
						type : "post",
						dataType : "json",
						success : function(result) {
							if (result.code == 0) {
								sweetAlert("提示", "删除成功!", "success");
								Search();
							} else {
								sweetAlert("异常", "操作失败,请刷新后重试!", "error");
							}

						},
						error : function() {
							sweetAlert("提示", "暂无数据!", "error");
						}
					});
			});
		}
	</script>
</body>

</html>